﻿// JScript File

//Column Types :
// a) Label
// b) Button
// c) Link
// d) Header 
// e) Footer
// f) Generic HTML Column
// g) Text 

/*
 * AjaxGrid.ColumnTypes.
*/


var _headerCssClass="";
var _prevSelectedRow=null;
var _currentSubDetailsRowID = null
function addHeaderRow(columnSpecifications) {
    var _headerRow = document.createElement("TR");
    for( var loopIndex =0 ;loopIndex < columnSpecifications.Columns.length ; loopIndex++ ) {
        _headerRow.appendChild( addHeaderColumn( columnSpecifications.Columns[loopIndex] ));  
    }
    return _headerRow; 
}
function addHeaderColumn(columnSpecification) {
    var _headerColumnCell = document.createElement("TH");
    if( typeof(columnSpecification.Style)!== 'undefined'  ) {
     _headerColumnCell.style.width= columnSpecification.Style.Width;
    }
    if( typeof(columnSpecification.headerCssClass)!== 'undefined'  ) {
     _headerColumnCell.className = columnSpecification.headerCssClass;
    }
    _headerColumnCell.appendChild( document.createTextNode(columnSpecification.headerName) ) ;
    return _headerColumnCell;
}

//listElementID is the Table's ID 
function BindGrid(listData,listElementID,columnSpecifications,expandSubRows,subRowDataExpression){
    var parentElement = $get( listElementID );  
  //Add a new TBody
  parentElement.appendChild( document.createElement("TBODY"));
  //remove existing Rows:
  parentElement.tBodies[1].removeNode( true );
  var rowTemplates = { EmptyRowTemplate :
                        {Columns:[
                                {type:"text",text:"No"},
                                {type:"text",text:"Data"},
                                {type:"html",html:"Available <img src='images/xmag.png'/>"}]
                          }
                     };
 
   parentElement.tBodies[1].appendChild( addHeaderRow( columnSpecifications ) ); 
   for( var loopIndex=0;loopIndex < listData.length ; loopIndex++ ) {
        parentElement.tBodies[1].appendChild( 
            addDataRow(columnSpecifications,
                        listData[loopIndex],
                        listElementID+"row"+loopIndex,
                        expandSubRows?listData[loopIndex][subRowDataExpression]:listData[loopIndex],
                        expandSubRows) );
   }
   
   if ( listData.length === 0 ) {
   parentElement.tBodies[1].appendChild( renderTemplate( rowTemplates.EmptyRowTemplate ) );
   }
}

function renderTemplate(templateSpecification) {
    var _templatedRow = document.createElement("TR");
        for( var loopIndex =0 ;loopIndex < templateSpecification.Columns.length ; loopIndex++ ) {
           var _templatedCell  = document.createElement("TD");
            switch ( templateSpecification.Columns[loopIndex].type ) {
                    case "text" : _templatedCell.appendChild( document.createTextNode(templateSpecification.Columns[loopIndex].text) );break;
                    case "html" : _templatedCell.innerHTML = templateSpecification.Columns[loopIndex].html ;break;
            } 
           _templatedRow.appendChild( _templatedCell );  
        } 
    return _templatedRow; 
}

function addExpandRow(subData,subDataTableId,subDetailsDivID) {
    var _dataColumnCell = document.createElement("TD");
    var _columnText = "Expand/Collapse";
    _dataColumnCell.appendChild( document.createTextNode( _columnText ) );
    var expandSubRowHandler = Function.createDelegate(this,addSubDetailsRow);
        $addHandler(_dataColumnCell,"click",expandSubRowHandler);
        //Add Exanpdo to hold the subDetails Rows
    _dataColumnCell._rowSubDetailData = subData; 
    _dataColumnCell._rowSubDetailTableID = subDataTableId;
    _dataColumnCell._rowsubDetailsDivID = subDetailsDivID;
    return _dataColumnCell;
}
function addDataRow(columnSpecifications,rowData,rowId,subData,expandSubRows) {
   var _dataRow = document.createElement("TR");
   _dataRow.id = rowId;
       if( expandSubRows && subData!== null ) {
        //_dataRow.appendChild(addExpandRow(subData));
       }
    for( var loopIndex =0 ;loopIndex < columnSpecifications.Columns.length ; loopIndex++ ) {
        _dataRow.appendChild( addDataColumn( columnSpecifications.Columns[loopIndex],rowData,subData ));  
            
       }
   return _dataRow; 
}
function addDataColumn(columnSpecification,rowData,subData) {
   var _dataColumnCell = document.createElement("TD");
   var _columnText = "";
   if( columnSpecification.noAction === true ) {
        _columnText = columnSpecification.dataText+" { "+subData.length+" } ";
        var expandSubRowHandler = Function.createDelegate(this,addSubDetailsRow);
        $addHandler(_dataColumnCell,"click",expandSubRowHandler);
        _dataColumnCell._rowSubDetailData = subData; 
        _dataColumnCell._rowSubDetailTableID = columnSpecification.subDataTableId;
        _dataColumnCell._rowsubDetailsDivID = columnSpecification.subDetailsDivID;
        _dataColumnCell.style.width= columnSpecification.Style.Width;
        }
   else {
        _columnText =  rowData[columnSpecification.dataFieldName];
        
   }    
_dataColumnCell.appendChild( document.createTextNode( _columnText ) ); 
   return _dataColumnCell;
}

function addSubDetailsRow(eventArgs){
    
  eventArgs = eventArgs === null ? eventArgs : window.event;  
  
  var cellElement = eventArgs.srcElement
  var rowElement = cellElement.parentElement;
  cellElement.className="";
  var _subDetailsData = cellElement._rowSubDetailData;
  var _tableElement   = cellElement._rowSubDetailTableID;
  var subDetailsDivID = cellElement._rowsubDetailsDivID;
  
  var currLocation = Sys.UI.DomElement.getLocation(rowElement);
  Sys.UI.DomElement.setLocation($get(subDetailsDivID), 
                                currLocation.x+rowElement.firstChild.offsetWidth, 
                                currLocation.y+rowElement.firstChild.offsetHeight);
                                
  //if the SubDetails Grid is already shown , hide it 
  if( _currentSubDetailsRowID === cellElement ) {
    $get(subDetailsDivID).style.display =  $get(subDetailsDivID).style.display == "block" ?"none":"block" ;
  } else {
     $get(subDetailsDivID).style.display =  "block";
  }
  selectRow(rowElement);
  
  var columnSpecifications = {Columns:[{headerName:"ProductID",dataFieldName:"ProductID",noAction:false,Style:{Width:"60px"}},
                                    {headerName:"UnitPrice",dataFieldName:"UnitPrice",noAction:false,Style:{Width:"60px"}},
                                    {headerName:"ProductName",dataFieldName:"ProductName",noAction:false,Style:{Width:"120px"}},
                                    {headerName:"UnitsInStock",dataFieldName:"UnitsInStock",noAction:false,Style:{Width:"120px"}},
                                    {headerName:"QuantityPerUnit",dataFieldName:"QuantityPerUnit",noAction:false,Style:{Width:"140px"}},
                                    {headerName:"Discontinued",dataFieldName:"Discontinued",noAction:false,Style:{Width:"80px"}}]};
  BindGrid(_subDetailsData,"tblSubDataTable",columnSpecifications,false,"")
  _currentSubDetailsRowID = cellElement;
}

function selectRow(rowElement) {
    if( _prevSelectedRow !== null) {
        _prevSelectedRow.className = _prevSelectedRow._origclassName;
    }
    _prevSelectedRow = rowElement;
    _prevSelectedRow._origclassName = _prevSelectedRow.className;
    _prevSelectedRow.className = "gridSelectedRowGB";
}